<template>
  <div class="nine-grid">
    <div class="grid-container">
      <VideoPlayer
          v-for="video in currentPageVideos"
          :key="video.id"
          :videoId="video.id"
          class="grid-item"
      />
    </div>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import VideoPlayer from '@/components/VideoPlayer.vue';

export default {
  components: { VideoPlayer },

  setup() {
    const videos = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]); // 从API获取的视频列表
    const currentPage = ref(1);
    const videosPerPage = 9;

    /*// 模拟从API获取视频列表
    const fetchVideos = async () => {
      const response = await axios.get('/api/videos');
      videos.value = await response.json();
    };*/

    // 计算当前页显示的视频
    const currentPageVideos = computed(() => {
      const start = (currentPage.value - 1) * videosPerPage;
      const end = start + videosPerPage;
      return videos.value.slice(start, end);
    });

    // 计算总页数
    const totalPages = computed(() => {
      return Math.ceil(videos.value.length / videosPerPage);
    });

    // 翻页方法
    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    };

    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

    // 初始化获取视频列表
    //fetchVideos();

    return { currentPageVideos, currentPage, totalPages, nextPage, prevPage };
  }
};
</script>

<style scoped>
.nine-grid {
  width: 100%;
  height: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: calc(100% - 40px);
}

.grid-item {
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
}

.pagination {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
</style>
